• Part I. ioslides
  • Part II. htmlwidget

Part I. ioslides

ioslides

  • R Markdown에서 제공하는 html 슬라이드 포맷
  • slidy에 비해서 상대적으로 작업이 쉽고 rendering이 빠름
  • (slidy는 customization의 영역이 더 많음)
  • 웹브라우저에서 열 수 있고 크롬에서 pdf로 저장도 가능
  • https://bookdown.org/yihui/rmarkdown/ioslides-presentation.html

Subtitling & Incremental Mode

This is my subtitle

  • 이 페이지의 Level-2 헤더는 아래와 같이 적었음
## Subtitling and Incremental Mode | This is my subtitle {.build}
  • Subtitle
    • 페이지에 title과 함께 subtitle을 넣을 수 있음
    • 중요한 메시지를 전달
  • Incremental Mode
    • {.build}를 적어주면 incremental mode가 실행됨
    • global하게 적용하려면 YAML 헤더에 incremental: true

Presentation control

Chrome에서 아래 키로 프리젠테이션 조작 가능

  • ‘f’: enable fullscreen mode
  • ‘w’: toggle widescreen mode
  • ‘o’: enable overview mode
  • ‘h’: enable code highlight mode
  • ‘p’: show presenter notes

Code highlighting

  • ‘h’: enable code highlight mode
trivial_code1 <- 0
important_code1 <- 0
important_code2 <- 0
trivial_code2 <- 0
  • 위의 코드 블럭은 아래와 같이 입력했음
  • Highlight하고 싶은 영역을 “### <b>”와 “### </b>”로 둘러쌓으면 됨

Background images and Font color

As you walk down the fairway of life you must smell the roses, for you only get to play one round. – Ben Hogan

  • 앞 페이지의 Rmd 코드는 아래와 같음
    • Background images는 Level-2 Header에서 지정 (이미지 파일 경로와 사이즈 지정)
    • 폰트의 색을 바꾸고 싶은 영역을 <div class="white">와 </div>로 둘러싸면 하얀색 폰트로 나옴

YAML Header of this lecture note

  • logo에 이미지 파일 경로 지정
  • styles.css 파일을 이용해서 로고 이미지와 테두리 크기 지정
  • smaller: true로 전체적으로 작은 폰트
  • incremental: true는 전체 슬라이드를 incremental mode로 지정
  • transition: slower는 전체 슬라이드에 페이드 효과를 줌

Part II. htmlwidget

plotly 객체

library(ggplot2)
library(plotly)
fig <- ggplot(mpg, aes(x = displ, y = hwy)) + 
  geom_point(aes(color = class)) + geom_smooth()
fig_plotly <- ggplotly(fig) 
class(fig_plotly)
## [1] "plotly"     "htmlwidget"

fig_plotly

dygraphs 객체

library(dygraphs)
lungDeaths <- cbind(mdeaths, fdeaths)
fig_dygraph <- dygraph(lungDeaths) %>%
  dySeries("mdeaths", label = "Male") %>%
  dySeries("fdeaths", label = "Female") %>%
  dyOptions(stackedGraph = TRUE) %>%
  dyRangeSelector(height = 20)
class(fig_dygraph)
## [1] "dygraphs"   "htmlwidget"

fig_dygraph

leaflet() - Interactive map

library(leaflet)
fig_leaflet <- leaflet() %>% addTiles() %>% 
  setView(127.076, 37.631, zoom = 16) %>%
  addMarkers(127.076, 37.63148, label="We're here!",
             labelOptions = labelOptions(noHide = TRUE, textsize = "15px"))
class(fig_leaflet)
## [1] "leaflet"    "htmlwidget"

fig_leaflet

DT (DataTables) 객체

tbl_DT1

Some configuration

tbl_DT2 <- 
  datatable(iris, 
            caption = '(Caption) Table 1: This is iris dataset.',
            rownames = FALSE,
            fillContainer = FALSE, 
            options = list(pageLength = 8),
            class = 'cell-border stripe')
  • caption 위치를 바꿀 수도 있음
  • fillContainer = TRUE이면 크기를 자동 조정
  • options = list(pageLength = 12)로 초기 행의 갯수 지정
  • class = 'cell-border stripe'는 세로줄 추가

tbl_DT2